<template>
  <div style="height: 100%">
    <div class="searchList">
      <div class="row">
        <!-- <field
          class="leftField"
          right-icon="arrow-down"
          readonly
          clickable
          name="picker"
          :value="searchForm.building"
          label-width="30px"
          label="区域"
          placeholder="选择区域"
          @click="showPickerBuilding = true"
        ></field>
        <popup v-model="showPickerBuilding" position="bottom">
          <picker
            show-toolbar
            :columns="columnsBuilding"
            @confirm="onConfirmBuilding"
            @cancel="showPickerBuilding = false"
          />
        </popup> -->
        <field
          class="leftField"
          right-icon="arrow-down"
          readonly
          clickable
          name="picker"
          :value="equipmentType"
          label-width="30px"
          label="类型"
          placeholder="选择类型"
          @click="showPickerType = true"
        />
        <popup v-model="showPickerType" position="bottom">
          <picker
            show-toolbar
            value-key="equipmentTypeName"
            :columns="columnsType"
            @confirm="onConfirmType"
            @cancel="showPickerType = false"
          />
        </popup>
        <field
          class="rightField equipType"
          v-model="equipmentNumber"
          label-width="60px"
          label="设备编号"
          placeholder="请输入编号"
          @blur="inputNumChange"
        />
      </div>
      <div class="row">
        <!-- <field
          class="leftField"
          right-icon="arrow-down"
          readonly
          clickable
          name="picker"
          :value="equipmentType"
          label-width="30px"
          label="类型"
          placeholder="选择类型"
          @click="showPickerType = true"
        />
        <popup v-model="showPickerType" position="bottom">
          <picker
            show-toolbar
            value-key="equipmentTypeName"
            :columns="columnsType"
            @confirm="onConfirmType"
            @cancel="showPickerType = false"
          />
        </popup> -->
        <field
          class="leftField"
          right-icon="arrow-down"
          readonly
          clickable
          name="picker"
          :value="searchForm.floor"
          label-width="30px"
          label="楼层"
          placeholder="选择楼层"
          @click="showPickerFloor = true"
        />
        <popup v-model="showPickerFloor" position="bottom">
          <picker
            show-toolbar
            :columns="columnsFloor"
            @confirm="onConfirmFloor"
            @cancel="showPickerFloor = false"
          />
        </popup>
      </div>
    </div>
    <div class="contentList">
      <div class="listAll">
        <report-list
          :change-search="changeSearch"
          @changeSearchBack="changeSearchBack"
          @getList="getListAll"
        ></report-list>
      </div>
    </div>
  </div>
</template>

<script>
import { Field, Popup, Picker } from "vant";
import ReportList from "./components/ReportList";
import { equipmentTypeList, reportList } from "@/api/Report";
import { reportData } from "../Digital/uuid2num";
export default {
  name: "overview",
  components: {
    Field,
    Popup,
    Picker,
    ReportList
  },
  data() {
    return {
      changeSearch: false,
      columnsBuilding: reportData.data.buildings,
      columnsType: [],
      columnsFloor: ["全部"].concat(reportData.data.floors),
      showPickerBuilding: false,
      showPickerType: false,
      showPickerFloor: false,
      equipmentType: "全部",
      equipmentNumber: "",
      searchForm: {
        building: "全部",
        equipmentNumber: "",
        equipmentType: "",
        floor: "全部"
      },
      active: "全部",
      // 下面部分
      list: [],
      loading: false,
      finished: false,
      refreshing: false
    };
  },
  mounted() {
    this.equipmentTypeList();
  },
  watch: {
    searchForm: {
      handler(v) {
        this.changeSearch = true;
      },
      deep: true
    }
  },
  methods: {
    changeSearchBack(v) {
      this.changeSearch = v;
    },
    async reportList(pageInfo) {
      let res = await reportList({
        building:
          this.searchForm.building === "全部"
            ? undefined
            : this.searchForm.building,
        floor:
          this.searchForm.floor === "全部" ? undefined : this.searchForm.floor,
        equipmentType: this.searchForm.equipmentType,
        equipmentNumber: this.searchForm.equipmentNumber
          ? this.searchForm.equipmentNumber
          : undefined,
        pageNum: pageInfo.pageNum,
        pageSize: pageInfo.pageSize
      });
      if (res.code === 0) {
        return res.result.pageResult;
      }
    },
    inputNumChange() {
      this.searchForm.equipmentNumber = this.equipmentNumber;
    },
    async equipmentTypeList() {
      let res = await equipmentTypeList();
      if (res.code === 0) {
        this.columnsType = [
          { equipmentTypeId: "", equipmentTypeName: "全部" }
        ].concat(res.data);
      }
    },
    onConfirmBuilding(value) {
      this.searchForm.building = value;
      this.showPickerBuilding = false;
    },
    onConfirmType(value) {
      console.log(value, 'value')
      this.equipmentType = value.equipmentTypeName;
      this.searchForm.equipmentType = value.equipmentTypeId;
      this.showPickerType = false;
    },
    onConfirmFloor(value) {
      this.searchForm.floor = value;
      this.showPickerFloor = false;
    },
    getListAll(pageInfo, callback) {
      // let listAdd = []
      // for (let i = 1; i <= 10; i++) {
      //   listAdd.push((pageInfo.pageNum - 1) * 10 + i)
      // }
      // callback(listAdd)
      this.reportList(pageInfo).then(res => {
        callback(res);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.searchList {
  width: 100%;
  .row {
    display: flex;
  }
  .equipType {
    padding: 10px 10px 10px 0 !important;
    /deep/ .van-field__control {
      border-radius: 5px !important;
    }
  }
  /*height: 150px;*/
  .van-cell {
    position: unset;
    border: none;
    background: transparent;
    /deep/ .van-field__label {
      text-align: right;
      color: white;
    }
    /deep/ .van-field__control {
      background-color: white;
      color: #666666;
      border-radius: 5px 0 0 5px;
      box-sizing: border-box;
      padding-left: 10px;
    }
  }
  .rightField {
    padding: 10px 18px 10px 0;
    width: 52%;
  }
  .leftField {
    padding-left: 10px;
    width: 45%;
  }
}
/deep/ .van-field__right-icon {
  background: white !important;
  padding: 0 4px 0 0;
  border-radius: 0 5px 5px 0;
  color: #fc5a69;
}
.tabNav {
  margin-bottom: 5px;
  /deep/ .van-tabs__wrap {
    width: 90%;
    margin-left: 5%;
    border-radius: 5px;
    box-shadow: 0px 1px 2px 0px #cccccc;
  }
  /deep/ .van-tabs__line {
    background-color: #fc5a69;
  }
}
.contentList {
  margin-top: 30px;
  padding: 0 5%;
  height: calc(100% - 120px);
  .listAll {
    height: 100%;
    overflow: scroll;
  }
}
</style>
